
<template>
  <view class="order_page">
    <view class="status_type">
      <view class="type_item" @click.stop="changeType(0)">
        <text class="type_text" :class="statusType === 0 ? 'current' : ''"
          >全部
        </text>
      </view>
      <view class="type_item" @click.stop="changeType(2)">
        <text class="type_text" :class="statusType === 2 ? 'current' : ''"
          >待收货
        </text>
      </view>
      <view class="type_item" @click.stop="changeType(3)">
        <text class="type_text" :class="statusType === 3 ? 'current' : ''"
          >已完成
        </text>
      </view>
    </view>

    <order-empty v-if="!listData.total" />
    <view v-else class="order_list">
      <view class="biscuit-order" v-for="item in listData.list" :key="item.id">
        <view class="order-status flex justify-between">
          订单状态
          <label class="text-primary">{{
            ORDER_STATUS[item.orderStatus]
          }}</label>
        </view>
        <view class="order-goods">
          <view
            class="goods-cover cover w-80px h-80px"
            :style="{
              backgroundImage: `url(${item.items[0].productImageUrl})`,
            }"
          >
          </view>
          <view class="flex-1 leading-none flex-col px-12px h-80px py-2px">
            <view class="mb-27px text-goods"
              >{{ item.items[0].productName }}
            </view>
            <text class="text-xxs text-999"
              >规格：{{ skuLabel(item.items[0].productSkuSpData) }}
            </text>
          </view>
          <text>共{{ item.items[0].productSkuQuantity }}件</text>
        </view>
        <view class="order-action flex justify-end pb-15px leading-none">
          <view class="text-999 pt-24px text-xxs">
            共 {{ item.items[0].productSkuQuantity }} 件商品 实付
          </view>
          <view class="pt-13px ml-48px">
            <view class="flex text-primary text-default items-end">
              <image
                class="w-17px h-20px mr-4px"
                :src="ossImg('order/aoliao_icon.png')"
              />
              {{ item.scoreAmount }}小饼干
            </view>
            <button
              class="action_btn text-primary"
              @click.stop="onViewDetail(item)"
            >
              订单详情
            </button>
          </view>
        </view>
      </view>

      <uni-load-more
        class="loadMore"
        v-if="listData.list.length !== 0"
        :status="loadingStatus"
        :content-text="contentText"
        @click.stop="scrollChange"
      />
    </view>
  </view>
</template>
    
<script setup>
import OrderEmpty from "@/components/empty-order";
import UniLoadMore from "@/components/uni-load-more/uni-load-more";

import { ref, defineProps, watch } from "vue";
import { onLoad, onShow, onHide, onReachBottom } from "@dcloudio/uni-app";
import { ossImg, message, debounce, orderStatusFilter } from "@/utils/utils";
import { ORDER_STATUS } from "@/CONSTANT";
import { GetBiscuitOrders } from "@/services/biscuit";

const props = defineProps({
  currentType: {
    type: Number,
    default: 0,
  },
});

const statusType = ref(0);
const pagination = ref({
  orderStatus: "",
  pageNum: 1,
  pageSize: 5,
});
const listData = ref({
  total: 0,
  list: [],
});
const contentText = ref("加载更多");
const loadingStatus = ref("more");

const skuLabel = (skuData) => {
  return skuData.map(({ value, key }) => `${key}${value}`).join(" ");
};
const changeType = (type) => {
  if (statusType.value === type) return;
  statusType.value = type;
  pagination.value.pageNum = 1;
  getList();
};

onLoad(() => {});
onShow(() => {
  pagination.value.pageNum = 1;
  pagination.value.pageSize = 5;
  getApp().accessLogAdd();
  getList();
});
onHide(() => {
  pagination.value.pageNum = 1;
});

onReachBottom(() => {
  scrollChange();
});

const getList = async () => {
  loadingStatus.value = "more";
  contentText.value = "加载更多";
  let params = pagination.value;
  if (statusType.value === 0) {
    params.orderStatus = "";
  } else {
    params.orderStatus = statusType.value;
  }
  const res = await GetBiscuitOrders(params);
  listData.value = res.data;
  if (listData.value.list.length === listData.value.total) {
    loadingStatus.value = "noMore";
    contentText.value = "没有更多";
  }
};
watch(
  () => props.currentType,
  () => {
    console.log("监听porps", props.currentType);
    if (props.currentType === 2) {
      getList();
    }
  },
  {
    immediate: true, // 这个属性是重点啦
  }
);
const scrollChange = async () => {
  if (listData.value.list.length === listData.value.total)
    return (loadingStatus.value = "noMore"), (contentText.value = "没有更多");

  loadingStatus.value = "loading";
  contentText.value = "加载中";
  pagination.value.pageNum++;
  const res = await GetBiscuitOrders(pagination.value);
  if (res?.code === 200) {
    listData.value.list = listData.value.list.concat(res.data.list);
    if (listData.value.list.length === listData.value.total) {
      loadingStatus.value = "noMore";
      contentText.value = "没有更多";
    } else {
      loadingStatus.value = "more";
      contentText.value = "加载更多";
    }

    console.log(listData.value);
  }
};

const onViewDetail = (item) => {
  uni.navigateTo({ url: `/personalPages/biscuit/order-detail?id=${item.id}` });
};
</script>
    
<style lang="less" scoped>
@import "@/static/css/theme.less";
.order_page {
  width: 375px;
  min-height: 100vh;
  background-color: #f0f1f3;
  overflow-y: auto;
  box-sizing: border-box;
  padding-top: 65px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  .status_type {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 375px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 12px;

    .type_item {
      background-color: #fff;
      border-radius: 4px;
      text-align: center;

      .type_text {
        width: 102px;
        height: 32px;
        display: block;
        line-height: 32px;
        font-weight: 400;
        color: #a9a9a9;
      }
    }
  }
  .current {
    border: 1px solid #0058c6;
    border-radius: 4px;
    color: #0058c6 !important;
  }
  .order_list {
    box-sizing: border-box;
    padding: 12px;
    overflow: hidden;
    .biscuit-order {
      padding: 0 20px;
      background-color: white;
      box-sizing: border-box;
      border-radius: 2px;
      font-size: 14px;
      margin-bottom: 9px;

      .order-status {
        display: flex;
        align-items: center;
        height: 43px;
        font-weight: bold;
      }

      .order-goods {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f2f2f2;
        border-top: 1px solid #f2f2f2;
      }

      .order-action {
        .action_btn {
          width: 93px;
          height: 24px;
          line-height: 23px;
          padding: 0;
          background: #ffffff;
          border: 1px solid #999999;
          border-radius: 12px;
          font-size: 14px;
          margin: 11px 0 0 auto;
        }
      }
    }
    .biscuit-order:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
    
